<template>
    <view class="white-block">
        <uni-datetime-picker class="date-picker" v-model="range" type="daterange" return-type="timestamp" @change="handleChange" />
    </view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
    import { getLastMonthStartDate } from '../utils/time-utils'

    const emit = defineEmits(['change'])

	const range = ref([])

	const handleChange = (e) => {
        emit('change', e)
	}

	onShow(()=>{
        let startDate = null
        let endDate = null;
		const monthFirthDate = uni.getStorageSync('userInfo')?.monthFirthDate
		const todayDate = new Date().getDate()
        if ( todayDate > monthFirthDate) {
            endDate = new Date().getTime();
            startDate = new Date().setDate(monthFirthDate)
        } else {
            endDate = new Date().getTime();
            startDate = getLastMonthStartDate(monthFirthDate)
        }
        range.value = [startDate, endDate]
        emit('change', range.value)
	})
</script>

<style lang="less" scoped>
.white-block {
    height: 104rpx;
    padding: 20rpx;
    .date-picker {
        width: 100%;
        height: 100%;
    }
}
</style>

